<template>
    <div>
        <a-modal
            title="报销单汇总打印"
            :visible="visible"
            @ok="visible = false"
            @cancel="visible = false"
            :footer="null"
            class="reimbursement-totalPrint-modal"
            :width="794+48+16"
        >
            <div style="width: 794px;">
                <div>
                    <a-button class="blue-btn" type="primary" v-print="printObj">打印</a-button>
                </div>
                <div id="reimbursement-totalPrint">
                    <div class="reimbursement-summary-1">
                        <div class="applicationForTransferForm-print-box preview-box">
                            <div v-if="printList.bxd.fbxdlx == '对公转账申请单'">
                                <h3 style="text-align: center;font-weight: 600;font-size: 22px;">申请转账单</h3>
                                <table border="1" cellspacing="0" class="applicationForTransferForm-table">
                                    <tr>
                                        <th style="width:130px;">收款单位</th>
                                        <td>{{ formState.bxd.fskdw }}</td>
                                        <th rowspan="3" style="padding: 0 !important;width:80px;">付款<br/>方式</th>
                                        <td rowspan="3" style="width: 120px;">转&nbsp;账</td>
                                    </tr>
                                    <tr>
                                        <th style="width:130px;">账&nbsp;&nbsp;号</th>
                                        <td>{{ formState.bxd.fkhyhkh.replace(/(\d{4})(?=\d)/g, "$1 ") }}</td>
                                    </tr>
                                    <tr>
                                        <th style="width:130px;">开户银行</th>
                                        <td>{{ formState.bxd.fkhyh }}</td>
                                    </tr>
                                    <tr>
                                        <th style="width:130px;">金&nbsp;&nbsp;额</th>
                                        <td>{{ formState.bxd.fhjbxjedx }}</td>
                                        <td colspan="2" style="text-align: left;">{{ '￥'+formState.bxd.fybbxje }}</td>
                                    </tr>
                                    <tr>
                                        <th style="width:130px;">用&nbsp;&nbsp;途</th>
                                        <td colspan="3">{{ formState.bxd.fbxnrms }}</td>
                                    </tr>
                                </table>
                                <div style="page-break-after:always"></div>
                            </div>
                            <div v-if="printList.bxd.fbxdlx == '支出报销单'">
                                <div style="display: flex;">
                                    <div class="expenseApprovalForm-print-box">
                                        <h1 class="letterSpan">支出报批单</h1>
                                        <div class="expenseApprovalForm-print-title-box" style="padding: 0 40px;">
                                            <span>
                                                <span class="Title">申报部门：</span>{{ printList.bxd.fjbks }}
                                            </span>
                                            <span>
                                                <span class="Title">填报日期：</span>
                                                {{ printList.bxd.ftbrq.substr(0,4) }} <span class="Title">年</span>
                                                {{ printList.bxd.ftbrq.substr(5,2) }} <span class="Title">月</span>
                                                {{ printList.bxd.ftbrq.substr(8,2) }} <span class="Title">日</span>
                                            </span>
                                        </div>
                                        <table border="1" cellspacing="0" class="expenseApprovalForm-table">
                                            <tr>
                                            <td style="text-align: left;">
                                                <span class="Title">用途：</span>
                                                {{ printList.bxd.fbxnrms }}
                                            </td>
                                            </tr>
                                            <tr>
                                            <td style="text-align: left;display: flex;justify-content: space-between;border: unset;">
                                                <span>
                                                    <span class="Title" style="margin-right: 20px;">金额（大写）：</span>
                                                    {{ printList.bxd.fhjbxjedx }}
                                                </span>
                                                <span style="text-align: right;padding-right: 30px;"><span class="Title">小写￥</span>{{ printList.bxd.fybbxje }}</span>
                                            </td>
                                            </tr>
                                            <tr>
                                            <td style="display: flex;padding: 0 !important;border: unset;border-top: 1px solid #5ca3e5;">
                                                <div style="flex: 1;border-right: 1px solid #5ca3e5;">
                                                    <p class="Title" style="text-align: left;padding-left: 5px;">单位领导批示：</p>
                                                    <p style="min-height: 80px;">{{ printList.bxd.fzxspyj }}</p>
                                                    <p style="text-align: right;padding-right: 5px;margin-bottom: 10px;">
                                                        <span style="margin-right: 20px;">
                                                            <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fzxsprid)" alt="签名图片">
                                                            <span v-else> {{ printList.bxd.fzxspr }}</span>
                                                        </span>
                                                        {{ printList.bxd.fzxspsj?printList.bxd.fzxspsj.substr(5,2):'' }}
                                                        <span class="Title" v-if="printList.bxd.fzxspsj">月</span>
                                                        {{ printList.bxd.fzxspsj?printList.bxd.fzxspsj.substr(8,2):'' }}
                                                        <span class="Title" v-if="printList.bxd.fzxspsj">日</span>
                                                    </p>
                                                </div>
                                                <div style="flex: 1;">
                                                    <p class="Title" style="text-align: left;padding-left: 5px;">部门负责人审核：</p>
                                                    <p style="min-height: 80px;">{{ printList.bxd.fjbbmshyj }}</p>
                                                    <p style="text-align: right;padding-right: 5px;margin-bottom: 10px;">
                                                        <span style="margin-right: 20px;">
                                                            <img v-if="getQmImg(printList.bxd.fjbbmshrid)" :src="getQmImg(printList.bxd.fjbbmshrid)" alt="签名图片">
                                                            <span v-else> {{ printList.bxd.fjbbmshr }}</span>
                                                        </span>
                                                        {{ printList.bxd.fjbbmshsj?printList.bxd.fjbbmshsj.substr(5,2):'' }}
                                                        <span class="Title" v-if="printList.bxd.fjbbmshsj">月</span>
                                                        {{ printList.bxd.fjbbmshsj?printList.bxd.fjbbmshsj.substr(8,2):'' }}
                                                        <span class="Title" v-if="printList.bxd.fjbbmshsj">日</span>
                                                    </p>
                                                </div>
                                            </td>
                                            </tr>
                                        </table>
                                        <div class="expenseApprovalForm-print-title-box" style="padding: 10px 150px;">
                                            <span>
                                                <span class="Title">会计:</span>
                                                <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fcwshrid)" alt="签名图片">
                                                <span v-else> {{ printList.bxd.fcwshr }}</span>
                                            </span>
                                            <span>
                                                <span class="Title">出纳:</span>
                                                <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fcnshrid)" alt="签名图片">
                                                <span v-else> {{ printList.bxd.fcnshr }}</span>
                                            </span>
                                            <span>
                                                <span class="Title">经办人:</span>
                                                <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fjbrid)" alt="签名图片">
                                                <span v-else> {{ printList.bxd.fjbr }}</span>
                                            </span>
                                        </div>
                                        <div style="display: flex;padding-left: 10px;color: #5ca3e5;">
                                            <div>说明：</div>
                                            <div>
                                            <span>1、外来原始凭证粘贴单和大张的外来原始凭证应分项汇总填写此单。</span><br/>
                                            <span>2、审批程序：部门负责人→会计→单位领导批准。</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="color: #5ca3e5;writing-mode: vertical-rl;display: flex;justify-content: space-evenly;padding: 100px 4px 100px">
                                        <span>附凭证</span>
                                        <span>张</span>
                                    </div>
                                </div>
                                <div style="page-break-after:always"></div>
                            </div>
                            <div v-if="laborCostsList.length > 0" style="margin-top: 60px;text-align: center;">
                                <h2 style="font-weight: 600;">{{ printList.bxd.fbxnrms }}</h2>
                                <div style="display: flex;justify-content: space-between;padding: 0px 20px 10px;">
                                    <span>部门：<span>{{ this.formState.fjbks }}</span></span>
                                    <span>日期：<span>{{ this.formState.ftbrq }}</span></span>
                                </div>
                                <table border="1" cellspacing="0" style="width: 100%" class="laborCostsTable">
                                    <tr>
                                        <th style="width: 60px;">序号</th>
                                        <th>姓名<span style="color: red;">(必填正确)</span></th>
                                        <th>身份证号<span style="color: red;">(必填正确)</span></th>
                                        <th>单位</th>
                                        <th style="width: 80px;">劳务费<br/>税前金额</th>
                                        <th style="width: 80px;">个税</th>
                                        <th>劳务费实发金额<br/><span style="color: red;">(必填正确)</span></th>
                                        <th>银行卡号</th>
                                    </tr>
                                    <template v-for="(item,index) in laborCostsList">
                                        <tr>
                                            <td :key="index"> {{ index + 1 }} </td>
                                            <td> {{ item.realname }} </td>
                                            <td> {{ item.fsfzh }} </td>
                                            <td> {{ item.fgzdw }} </td>
                                            <td> {{ item.flwfsqje }} </td>
                                            <td> {{ item.flwfgsje }} </td>
                                            <td> {{ item.flwfsbje }} </td>
                                            <td>
                                                {{ item.fyhkh + '/' }}<br/>
                                                {{ item.fkfh }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="4">合 计</td>
                                            <td></td>
                                            <td></td>
                                            <td>{{ item.fybbxje }}</td>
                                            <td></td>
                                        </tr>
                                    </template>
                                </table>
                                <div style="display: flex;padding-left: 10px;">
                                    <div style="white-space: nowrap;">说明：</div>
                                    <div style="text-align: left;">
                                        <span>1、当劳务费小于800元，不缴个税，劳务费税前金额=实发金额。</span><br/>
                                        <span>2、当劳务费大于800元且没超过4000元，劳务费税前金额=(劳务费实发金额-160)/0.8，个税=(劳务费税前金额-800元)*20%。</span>
                                    </div>
                                </div>
                                <!-- <div style="display: flex;padding: 10px 150px 10px 10px;justify-content: space-between;">
                                    <span>
                                        <span>部门负责人:</span>
                                        <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fcwshrid)" alt="签名图片">
                                        <span v-else> {{ printList.bxd.fcwshr }}</span>
                                    </span>
                                    <span>
                                        <span>经办人:</span>
                                        <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fcnshrid)" alt="签名图片">
                                        <span v-else> {{ printList.bxd.fcnshr }}</span>
                                    </span>
                                    <span>
                                        <span>审核:</span>
                                        <img v-if="getQmImg(printList.bxd.fzxsprid)" :src="getQmImg(printList.bxd.fjbrid)" alt="签名图片">
                                        <span v-else> {{ printList.bxd.fjbr }}</span>
                                    </span>
                                </div> -->
                                <div style="page-break-after:always"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    downMyQm,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            printList: [],
            laborCostsList: [],
            // transportationList:[],
            // allSpecialList:[],
            // expertServicesList:[],
            // expertServicesTotal:0,
            printObj:{
                id:"reimbursement-totalPrint", //需要打印的id名称
                popTitle:"报销单汇总打印",//文档的名称
                // preview:true,//预览功能，不好用
                zIndex:'20002',
                beforeOpenCallback(vue){
                    //console.log('打印回调',vue)
                },
                openCallback (vue) {//打开之前
                    //console.log('打开之前',vue)
                },
                closeCallback (vue) {//关闭了打印工具
                    //console.log('关闭了打印工具')
                },
            },
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(formState,val){
            this.formState = formState
            this.printList = []
            this.printList = val
            //console.log('打包打印：',formState,val)
            let item = val.bxdgr
            item.forEach(item => {
                if(Number(item.fybbxje) >= 800){
                    this.laborCostsList.push(item)
                }
            })
        },
        printClick(){

        },
        // 签名图片
        getQmImg(ids){
            downMyQm({id:ids}).then(resa => {
                if(resa.code){
                    return false
                } else {
                    return "data:image/png;base64," +
                    btoa( new Uint8Array(resa).reduce( (data, byte) => data + String.fromCharCode(byte), "" ))
                }
            })
        },
    }
}
</script>
<style lang="less">
.reimbursement-totalPrint-modal{
    //汇总表
    .reimbursement-summary-1{
        width: 100%;
        padding: 10px 15px;
        .table-hear{
            display: flex;
            font-weight: 600;
            flex-direction: column;
            h3{
                font-weight: 600;
                font-size: 18px;
                text-align: center;
                font-family: '方正小标宋简体' !important;
            }
            span{
                display: inline-block;
                width: calc(100% - 8px);
                text-align: right;
                padding-right: 12px;
            }
        }
        // .serviceFee-icon-text-td{
        //     width: 120px;
        // }
        .serviceFee-icon-text{
            display: flex;
            align-items: center;
            padding: 0 5px;
            .serviceFee-icon{
                color: #5ca3e5;
            }
            span{
                text-align: center;
                flex: 1;
            }
        }
    }
    .reimbursement-transportation-table{
        th{
            text-align: center;
            font-size: 16px;
            font-size: 12px;
            padding: 3px 5px;
            font-family: '宋体' !important;
            color: #000;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
            font-size: 12px;
            font-family: '宋体' !important;
            color: #000;
        }
        .special-table-lable-td{
            // background-color: #e6f7ff;
        }
    }
}
@media print{
    .reimbursement-summary-1{
        width: 100%;
        padding: 10px 15px;
        .table-hear{
            display: flex;
            font-weight: 600;
            flex-direction: column;
            h3{
                font-weight: 600 !important;
                font-size: 18px !important;
                text-align: center;
            }
            span{
                display: inline-block;
                width: calc(100% - 8px);
                text-align: right;
                padding-right: 12px;
            }
        }
        // .serviceFee-icon-text-td{
        //     width: 120px;
        // }
        .serviceFee-icon-text{
            display: flex;
            align-items: center;
            padding: 0 5px;
            .serviceFee-icon{
                color: #5ca3e5;
            }
            span{
                text-align: center;
                flex: 1;
            }
        }
    }
    .reimbursement-transportation-table{
        th{
            text-align: center;
            font-size: 16px;
            font-size: 12px;
            padding: 3px 5px;
            font-family: '宋体' !important;
            color: #000;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
            font-size: 12px;
            font-family: '宋体' !important;
            color: #000;
        }
        .special-table-lable-td{
            // background-color: #e6f7ff;
        }
    }
}
.travelReimbursementForm-print-box {
    font-size: 14px;
    font-family: 宋体;
    color: black;
    h1 {
        text-decoration: underline;
        text-align: center;
        color: #5ca3e5;
    }
    .travelReimbursementForm-table {
        width: 100%;
        text-align: center;
        table-layout: fixed;
        td {
        // min-width: 10px;
        padding: 0 !important;
        }
    }
    table {
        border-color: #5ca3e5;
        border-top: 2px solid #5ca3e5;
        border-left: 2px solid #5ca3e5;
        border-right: 2px solid #5ca3e5;
        border-bottom: 2px solid #5ca3e5;
    }
    h1 {
        color: #5ca3e5;
        font-weight: bold;
        letter-spacing: 4px;
        // font-size: 35px;
    }
    .Title {
        color: #5ca3e5;
        // font-weight: bold;
        text-align: center;
    }
    .letterSpan {
        // letter-spacing: 8px;
    }
    .td-rowspan {
        width: 1px !important;
        min-width: 1px !important;
        padding: 1px 0;
    }
    .travelReimbursementForm-print-title-box {
        display: flex;
        justify-content: space-between;
    }
}
.applicationForTransferForm-print-box {
    .applicationForTransferForm-table {
        width: 100%;
        text-align: center;
        // table-layout: fixed;
        th {
        padding: 10px 5px !important;
        }
        td {
        min-width: 10px;
        padding: 5px !important;
        }
    }
    .laborCostsTable {
        th {
            text-align: center;
            padding: 5px 0;
            font-size: 16px;
        }
        td {
            text-align: center;
            padding: 5px 0;
        }
    }
}
</style>
